@import "share/variable.scss";
@import "share/base.scss";
@import "share/nprogress.scss";
@import "./help.scss";

.font-blue{
  color: $font-blue!important;
}
.font-gray{
  color: $font-gray!important;
}
.block {
  display: block!important;
}


.mask{
  position: absolute;
  left:0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.15);
}
.rel{
  position: relative;
  width: 100%;
  height: 100%;
}

.sign-in-app {
  height: 100%;
  position: relative;
}
.sign-in-main{
  position: absolute;
  left: 0;
  right: 0;
  top: 50px;
  bottom: 0;
}
.container{
  width: 100%;
  height: 100%;
  position: relative;
  &:after,&:before{
    content: "";
    display: table;
  }
  &:after{
    clear: both;
  }
}


.bnt-blue{
  display: inline-block;
  font-size: 12px;
  font-weight: normal;
  color: #fff;
  background-color: #5987E4;
  padding: 6px 12px;
  border-radius: 2px;
  cursor: pointer;
  border: 1px solid #5987E4;
  &:hover{
    background-color: #6090ef;
  }
}

.bnt-cancle {
  background-color: #fff;
  display: inline-block;
  font-size: 12px;
  font-weight: normal;
  color: #5987E4;
  padding: 6px 12px;
  border-radius: 2px;
  cursor: pointer;
  &:hover{
    background-color: #f0f0f0;
  }
}

.bnt-disabled{

}

/*侧边栏*/
.side-bar{
  float: left;
  width: 280px;
  background: #fff;
  min-height: 100%;
  border-right: 1px solid #E1E8F5;
  padding: 0 10px;
  h2{
    padding: 16px 0 1.3rem .8rem;
    position: relative;
    font-size: 14px;
    font-weight: 500;
    color: #666;

    a{
      position: absolute;
      top: 11px;
      right: 0px;
    }
  }

  li{
    a{
      display: block;
      position: relative;
      padding: 12px 10px;
      font-size: 12px;
      cursor: pointer;
      color: #333;
      &:hover{
        background-color: #f9fbff;
      }
      .del{
        position: absolute;
        right: 1rem;
        top: 50%;
        transform: translate(0, -50%);
        color: red;
        font-size: 1.5rem;
        display: none;
      }
    }
    a.delitem{
      &:hover{
        .del{
          display: block;
        }
      }
    }
    a.active{
      background: #D9F0FF;
      &:hover{
        background: #D9F0FF;
      }
      &:after{
        content: "";
        display: block;
        position: absolute;
        right: -5px;
        top: 50%;
        width: 0;
        height: 0;
        border-top: 6px solid transparent;
        border-bottom: 6px solid transparent;
        border-left: 7px solid #D9F0FF;
        transform: translate(0, -50%);
      }
    }
  }
}

.main{
  width: 100%;
  padding-left: 280px;
  height: 100%;
  .main-top{
    padding: 10px 10px;
    width: 100%;
    overflow: hidden;
    &:after,&:before{
      content: "";
      display: block;
    }

    h2{
      color: #666;
      font-size: 14px;
      font-weight: 500;
      float: left;
      padding-left: .6rem;
      line-height: 30px;
    }
    .handle{
      float: right;
    }
  }

  .main-nav{
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    font-weight: normal;
    text-align: left;
    background-color: #f9fbff;
    border-bottom: 1px solid #dee7fa;
    border-top: 1px solid #dee7fa;
    padding-left: 17px;
    position: relative;

    &:after,&:before{
      content: "";
      display: table;
    }
    &:after{
      clear: both;
    }

    .main-nav-title{
      float: left;

      input{
        width: 250px;
        padding: 0 5px;
        border: 1px solid #dbe3e9;
        height: 24px;
        color: #70a0ff;
        display: block;
        margin-top: 7px;
      }
    }
    .main-nav-right{
      width: 26%;
      height: 40px;
      line-height: 40px;
      float: right;
      position: relative;
      padding-left: 10px;
      &:before{
        content: "";
        display: block;
        position: absolute;
        left: 0;
        top: 1rem;
        bottom: 1rem;
        width: 1px;
        border-left: 1px solid #dee7fa;
      }
    }
  }

  .main-content{
    padding: .8rem 0 26% 1.5rem;

    .main-content-left{
      float: left;
      width: 74%;
    }

    .main-content-side{
      padding-left: 74%;
      .add{
        display: block;
        margin: .8rem;
        border: 1px solid #dce3e9;
        border-radius: 5px;
        max-width: 250px;
        text-align: center;
        font-size: 14px;
        color: #479cd3;
        padding: 8px 0;
        cursor: pointer;
        position: relative;
        &:hover{
          background-color: #daf0ff;
        }
      }
      li{
        margin: .8rem;
        border: 1px solid #dce3e9;
        border-radius: 5px;
        max-width: 250px;
        text-align: center;
        font-size: 14px;
        color: #479cd3;
        padding: 8px 0;
        cursor: pointer;
        position: relative;
        &:hover{
          background-color: #daf0ff;
          [class*="icon-"]{
            display: block;
          }
        }
        [class*="icon-"]{
          position: absolute;
          right: 0;
          padding-right: 1.5rem;
          padding-left: 1rem;
          color: red;
          top: 50%;
          transform: translate(0, -50%);
          display: none;
          font-size: 1.4rem;
          z-index: 2;
        }
      }
    }


    .tr-item{
      padding: .6rem 0;
    }
    .tr-position{
      font-size: 14px;
      padding-top: 20px;
    }
    .td-item{
      display: inline-block;
      vertical-align: top;

      label{
        display: inline-block;
        vertical-align: baseline;
      }
      .td-area{
        display: inline-block;
        vertical-align: baseline;
        span.font-blue{
          margin: .5rem;
        }
        span.name{
          display: inline-block;
          width: 220px;
        }
        span.len{
          display: inline-block;
          color: $font-gray;
        }

        select {
          height: 22px;
          font-size: 12px;
          border: 1px solid #dfe6ec;
        }

        input[type='time']{
          border: 1px solid #dbe3e9;
          height: 22px;
          color: #70a0ff;
          font-family: 'Microsoft Yahei',Arial;
          font-size: 12px;
          padding-left: 4px;
        }

        input[type='number']{
          border: 1px solid #dbe3e9;
          height: 22px;
          color: #70a0ff;
          font-family: 'Microsoft Yahei',Arial;
          font-size: 12px;
          padding-left: 4px;
          width: 46px;
          padding-left: 0;
          text-align: center;
          &::-webkit-inner-spin-button{
            -webkit-appearance: none !important;
          }
        }
        .timeNode{
          font-size: 14px!important;
          height: 27px!important;
          color: #333!important;
        }

        .addposition{
          padding: 2px 5px;
          border: 1px solid #70A0FF;
          color: #70A0FF;
          background: #fff;
          cursor: pointer;
          height: 100%;
          border-radius: 3px;
          span{
            font-size: 16px;
            font-weight: bold;
          }
        }

      }

      .time-area{
        width: 120px;
      }
      .time-area-edit{
         width: 245px;
      }
      .td-area-list{
        margin-left: 70px;
        ul{
          padding-top: .8rem;
        }
        li{
          border: 1px solid #dbe3e9;
          padding: 0 5px;
          margin-bottom: 5px;
          height: 40px;
          line-height: 40px;
          span{
            vertical-align: baseline;
            display: block;
            float: left;
            &:first-child{
              width: 76px;
            }
            &:nth-child(2){
              width: 220px;
            }

          }
        span.del{
          float: right;
          color: #FF5C36;
          font-size: 1.8rem;
          cursor: pointer;
        }
        }
      }
    }
  }

}


.sign-pop {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  .sign-rel{
    position: relative;
    width: 100%;
    height: 100%;
  }
  .sign-mask{
    position: absolute;
    left:0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.15);
  }
  .sign-pop-box{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 620px;
    background: #fff;
    border-radius: .5rem;
    padding: 1rem 2rem;

    .sign-pop__head{
      height: 20px;
      line-height: 20px;
      position: relative;
      .title{
        display: inline-block;
        border-left: 3px solid #5993df;
        font-size: 14px;
        padding-left: 1rem;
      }
      .close{
        position: absolute;
        right: 0;
        top: 50%;
        transform: translate(0,-50%);
        color: #999;
        &:hover{
          color: red;
        }
      }
    }
    .sign-pop__content{
      height: 441px;
      border-bottom: 1px solid #e9e9e9;
      border-top: 1px solid #f5f5f5;
      margin-top: 1rem;
      ul{
        font-size: 0;
        padding: .5rem 0;
      }
      li{
        padding: .7rem .5rem;
        width: 25%;
        display: inline-block;
        font-size: 14px;
        color: #333;
      }
    }
    .sign-pop__close{
      text-align: center;
      padding-top: 1rem;
      a{
        background-color: #6087e2;
        border: none;
        border-radius: 3px;
        color: #fff;
        padding: 5px 20px;
        text-align: center;
        font-size: 14px;
        margin: 5px;
        display: inline-table;
        cursor: pointer;
        &:hover{
          background-color: #4c7bda;
        }
      }

    }
  }

  .nocontent{
    text-align: center;
    padding-top: 1rem;
    font-size: 14px;
  }
}

/**
穿梭框
 */


.transfer{
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  .transfer-box{
    width: 452px;
    height:420px;
    background: #fff;
    position: absolute;
    left: 50%;
    top: 50%;

    transform: translate(-50%,-50%);

    .transfer-box__head{
      background-color: #5987e4;
      padding: 0 7px;
      height: 43px;
      position: relative;
      color: #fff;
      span{
        font-size: 16px;
        margin-left: 15px;
        line-height: 43px;
      }
      .close{
        position: absolute;
        top: 0;
        right: 0;
        cursor: pointer;
        color: #fff;
        font-size: 1.6rem;
        height: 43px;
        line-height: 43px;
        display: inline-block;
        padding: 0 1rem;
        &:hover{
          background: #db5057;
        }
      }
    }

    .transfer-box__main{
      padding: 9px 20px 4px 20px;
      overflow: hidden;
      &:after,
      &:before{
        content: "";
        display: table;
      }
      &:after{
        clear: both;
      }

      .transfer-box__main--left{
        width: 190px;
        height: 306px;
        float: left;

        .transfer-box__main--lsearch{
          height: 28px;
          border: 1px solid #d9e3f4;
          position: relative;
          line-height: 28px;
          overflow: hidden;
          margin-bottom: .8rem;
          input{
            border: none;
            width: 100%;
            height: 26px;
            line-height: 26px;
            font-size: 12px;
            padding-left: .6rem;
            display: block;
          }
          [class *='icon-']{
            font-size: 1.2rem;
          }
          button{
            position: absolute;
            right: .5rem;
            top: 0;
            border: none;
            background: transparent;
            line-height: 28px;
            color: $font-gray;
            opacity: .8;
          }
        }
        .transfer-box__main--box {
          border: 1px solid #d9e3f4;
          height: 306px;

          .scrollbar {
            height: 274px;
          }
        }
        .transfer-box__main--box2{
          height: 272px;
          .scrollbar {
            height: 240px;
          }
        }

        .title {
          border-bottom: 2px solid #70a0ff;
          color: #70a0ff;
          text-align: center;
          padding: 5px 0 6px 0;
        }

      }
      .transfer-box__main--right{
        width: 190px;
        height: 306px;
        float: right;

        .transfer-box__main--rhead{
          height: 28px;
          margin-bottom: 10px;
          line-height: 28px;
          position: relative;
          em{
            color: #5987E4;
            font-style: normal;
          }
          a{
            color: #5987e4;
            position: absolute;
            right: 0;
            top: 0;
          }
        }

        .scrollbar{
          height: 268px;
          border: 1px solid #d9e3f4;
          .tree-item-top {

            &:hover {
              .del{
                display: block;
              }
            }

          }


          .del{
            display: none;
          }

        }
      }
    }

  }

  .transfer-footer{
    padding: .6rem 20px 0 20px;
    text-align: right;
    .enter{
      display: inline-block;
      background-color: #70a0ff;
      font-size: 14px;
      line-height: 34px;
      width: 120px;
      color: #fff;
      border-radius: 4px;
      text-align: center;
      &:hover{
        background-color: #4c7bda;
      }
    }
    .chancle{
      margin-left: 10px;
      display: inline-block;
      font-size: 14px;
      line-height: 34px;
      width: 120px;
      border-radius: 4px;
      text-align: center;
      background-color: #fff;
      border: 1px solid #70a0ff;
      color: #70a0ff;
      &:hover{
        background-color: #dfdfdf;
      }
    }
  }
}

.tree-item{
  .tree-item-top {
    padding: 7.5px 15px;
    cursor: pointer;
    position: relative;
    &:hover{
      background-color: #e6edfb;
    }
  }
  .del{
    position: absolute;
    right: .8rem;
    top: 52%;
    transform: translate(0,-50%);
    color: red;
  }
}